// 加载动画SVG定义
const loadingSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" stroke="currentColor">
    <g fill="none" fill-rule="evenodd">
        <g transform="translate(1 1)" stroke-width="2">
            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
            <path d="M36 18c0-9.94-8.06-18-18-18">
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="0 18 18"
                    to="360 18 18"
                    dur="1s"
                    repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>`;

// 创建加载动画元素
function createLoading(options = {}) {
    const {
        size = 38,
        color = 'currentColor',
        className = '',
        text = '加载中...'
    } = options;

    const container = document.createElement('div');
    container.className = 'loading-container ' + className;
    container.style.cssText = `
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: ${color};
    `;

    const spinner = document.createElement('div');
    spinner.className = 'loading-spinner';
    spinner.innerHTML = loadingSvg;
    spinner.firstChild.style.width = size + 'px';
    spinner.firstChild.style.height = size + 'px';

    container.appendChild(spinner);

    if (text) {
        const textElement = document.createElement('div');
        textElement.className = 'loading-text';
        textElement.textContent = text;
        textElement.style.marginTop = '8px';
        container.appendChild(textElement);
    }

    return container;
}

// 显示全屏加载
function showFullscreenLoading(options = {}) {
    const overlay = document.createElement('div');
    overlay.className = 'loading-overlay';
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    `;

    const loading = createLoading(options);
    overlay.appendChild(loading);
    document.body.appendChild(overlay);

    return overlay;
}

// 在指定元素内显示加载
function showElementLoading(element, options = {}) {
    const originalPosition = window.getComputedStyle(element).position;
    if (originalPosition === 'static') {
        element.style.position = 'relative';
    }

    const overlay = document.createElement('div');
    overlay.className = 'loading-overlay';
    overlay.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    `;

    const loading = createLoading(options);
    overlay.appendChild(loading);
    element.appendChild(overlay);

    return overlay;
}

// 移除加载动画
function removeLoading(overlay) {
    if (overlay && overlay.parentNode) {
        const element = overlay.parentNode;
        overlay.remove();
        if (element !== document.body) {
            const originalPosition = element.style.position;
            if (originalPosition === 'relative') {
                element.style.position = '';
            }
        }
    }
}

// 导出工具函数
window.Loading = {
    create: createLoading,
    showFullscreen: showFullscreenLoading,
    showElement: showElementLoading,
    remove: removeLoading
}; 